<template>
  <div class="notice">
    <div class="news_box">
      <h1>最新公告</h1>
      <ol>
        <li v-for="item of NoticeList" :key="item.announcement_id">
          <router-link :to="'/data/article/'+item.announcement_id" class="item">
            <i>{{item.title}}</i>
            <span class="datetext">{{item.update_time | dateFilter}}</span>
          </router-link>
        </li>
      </ol>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data () {
    return {
      NoticeList: []
    };
  },
  created () {
    this.getNotice();
  },
  methods: {
    getNotice () {
      axios.get("/static/data/notice.json").then(res => {
        this.NoticeList = res.data.data.reverse();
      });
    }
  },
  filters: {
    dateFilter (value) {
      Date.prototype.toLocaleString = function () {
        return (
          this.getFullYear() +
          "-" +
          (this.getMonth() + 1 < 10
            ? this.getMonth() + 1
            : "0" + (this.getMonth() + 1)) +
          "-" +
          this.getDate()
        );
      };
      return new Date(value * 1000).toLocaleString();
    }
  }
};
</script>
<style lang='stylus' scoped>
.notice {
  background: #fff;

  .news_box {
    width: 600px;

    ol {
      border: 1px solid #999;
      border-bottom: 0;

      li {
        a:hover {
          color: #2196f3;
          border-bottom: 1px solid #2196f3;
        }

        a {
          text-decoration: none;
        }

        .item {
          display: inline-block;
          padding: 10px 15px;
          font-size: 16px;
          color: #666;
          border-bottom: 1px solid #999;
          width: 100%;
          display: flex;
          justify-content: space-between;
          line-height: 30px;

          i {
            flex: 1;
          }

          .datetext {
            display: inline-block;
            width: 100px;
            margin-left: 20px;
          }
        }
      }
    }
  }
}
</style>
